
var data1;
ccjyear();
function ccjyear(){
    var date = new Date();
    data1=document.getElementById("searchtext").value;
if(data1!=""){
    datashow(data1);
}else{
    document.getElementById("line-chart").innerHTML="";
    datashow(date .getFullYear());
 }
}

//ajks
function datashow(data1){
$.ajax({
    url:"c/runcount/show",
    type:"post",
    dataType:"JSON",
    data:{
        data1
    },
    success:function(data) {
        if(data["bussion"][0] ===null){
            order=[0,0,0,0,0,0,0,0,0,0,0,0];
            bussion=[0,0,0,0,0,0,0,0,0,0,0,0];
            worker=[0,0,0,0,0,0,0,0,0,0,0,0];
        }else{
            order=[data["bussion"][0].april,data["bussion"][0].august,data["bussion"][0].december,data["bussion"][0].february,data["bussion"][0].january,data["bussion"][0].july,data["bussion"][0].june,data["bussion"][0].march,data["bussion"][0].may,data["bussion"][0].october,data["bussion"][0].september];
            bussion=[data["order"][0].april,data["order"][0].august,data["order"][0].december,data["order"][0].february,data["order"][0].january,data["order"][0].july,data["order"][0].june,data["order"][0].march,data["order"][0].may,data["order"][0].october,data["order"][0].september];
            worker=[data["worker"][0].april,data["worker"][0].august,data["worker"][0].december,data["worker"][0].february,data["worker"][0].january,data["worker"][0].july,data["worker"][0].june,data["worker"][0].march,data["worker"][0].may,data["worker"][0].october,data["worker"][0].september];
        }

        show(order,bussion,worker);
    },
    error:function (err) {
        console.log("error");
    },
});
}

function show(order,bussion,worker){
    createshow(order,bussion,worker);
}

function createshow(order,bussion,worker) {
    /**
     * 创建chartjs图表
     * @param  {string}  chart_canvas_id        画布id
     * @param  {string}  legend_id              图例id
     * @param  {Array}   dataset_config         显示数据
     * @return {null}                           直接显示结果
     */
    var make_chartjs_graph = function (chart_canvas_id, legend_id, dataset_config) {
        /**
         * 复制数据
         * @param  {Array} datasets  待复制的折线图数据包
         * @return {Array}           克隆数据包
         */
        var get_display_datasets = function (datasets) {
            var final_datasets = new Array();
            $.each(datasets, function (index, value) {
                if (value) {
                    final_datasets.push(value);
                }
                ;
            });
            return final_datasets;
        };

        var y_datasets = get_display_datasets(dataset_config.datasets);

        var chart = $('#' + chart_canvas_id);
        var legend = $('#' + legend_id);
        var lineChartData = dataset_config;

        var lineChartOptions = {
            //Boolean - If we should show the scale at all
            showScale: true,
            //Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: true,
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: true,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.3,
            //Boolean - Whether to show a dot for each point
            pointDot: true,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,
            //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
            pointHitDetectionRadius: 20,
            //Boolean - Whether to show a stroke for datasets
            datasetStroke: true,
            //Number - Pixel width of dataset stroke
            datasetStrokeWidth: 2,
            //Boolean - Whether to fill the dataset with a color
            datasetFill: false,
            //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: true,
            //Boolean - whether to make the chart responsive to window resizing
            responsive: true,
            // 自定义数据提示tooltip
            multiTooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>"
        };

        // 初始化折线图
        var lineChartCanvas = chart.get(0).getContext("2d");
        var lineChart = new Chart(lineChartCanvas);
        var line_chart_handle = lineChart.Line(lineChartData, lineChartOptions);

        // 自定义图例
        var div_ul = $('<ul class="line-legend"></ul>');
        $.each(y_datasets, function (index, value) {
            var div_li = $('<li class="checkbox-five" ><input name="' + legend_id + '" type="checkbox" value="' + index + '" ><label for="' + legend_id + '" style="background-color:' + value.strokeColor + ';"></label><span>' + value.label + '</span></li>');
            div_ul.append(div_li);
        });

        // 将图例放置于指定位置
        legend.empty();
        legend.append(div_ul);

        // 给图例中的选框增加事件响应
        // 被选中的则显示其对应折线，未选中的不显示
        $('[name = ' + legend_id + ']:checkbox').each(function (key, value) {
            // 设置所有的checkbox为选中
            $(this).attr('checked', true);
            // 设置checkbox被取消选择之后，将该曲线消除
            $(this).click(function () {
                var index = $(this).attr('value');
                if ($(this).is(':checked')) {
                    // 插入被选中折线上的点
                    $.each(y_datasets[index].data, function (key, value) {
                        line_chart_handle.datasets[index].points.push(new line_chart_handle.PointClass({
                            value: value,
                            label: lineChartData.labels[key],
                            datasetLabel: lineChartData.datasets[index].label,
                            x: line_chart_handle.scale.calculateX(line_chart_handle.scale.valuesCount + 1),
                            y: line_chart_handle.scale.endPoint,
                            strokeColor: line_chart_handle.datasets[index].pointStrokeColor,
                            fillColor: line_chart_handle.datasets[index].pointColor
                        }));
                    });
                } else {
                    // 删除被选中折线上的点
                    for (var i = line_chart_handle.datasets[index].points.length - 1; i >= 0; i--) {
                        line_chart_handle.datasets[index].points.shift();
                    }
                }

                // 更新折线
                line_chart_handle.update();
            });

            // 点击li时也视其为选中checkbox
            var li = $(this).parent();
            li.click(function () {
                $(this).children('input').get(0).click();
            });

        });
    };

// 生成随机数
    var randomScalingFactor = function () {
        return Math.round(Math.random() * 100);
    };

// 折线图id
    var chart_canvas_id = 'line-chart';

// 图例id
    var legend_id = 'line-legend';
// Y轴数据
    var default_datasets = [
        {
            label: "工人订单量",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: order
        },
        {
            label: "商家入住量",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: bussion
        },
        {
            label: "工人入住量",
            fillColor: "rgba(163,187,205,0.2)",
            strokeColor: "rgba(163,187,205,1)",
            pointColor: "rgba(163,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: worker
        },
        {
            label: "底线",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },
    ];

// 打包折线图数据
    var lineChartData = {
        labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月","八月","九月","十月","十一月","十二月"],
        datasets: default_datasets
    };

// 生成图表
    make_chartjs_graph(chart_canvas_id, legend_id, lineChartData);
}

